<template>
	<view class="container">

		<!-- 金刚区左右滑动菜单 indicator-dots="true" @change="onSwiperChange" :style="{flexWrap: item.child.length > 5 ? 'wrap':'nowrap'}"-->
		<swiper class="swiper-container tool-bar" :autoplay="false" :interval="0" :duration="300" circular
			indicator-dots="false">
			<swiper-item v-for="(section, sectionIndex) in list" :key="sectionIndex" class="item-wrap">
				<view class="menu-section" :style="{flexWrap: section.child.length > 1 ? 'wrap':'nowrap'}">
					<view v-for="(item, itemIndex) in section.child" :key="itemIndex" class="menu-item tool-item" @click="modelNavigateTo(item)">
						<img :src="item.img" alt="" class="tool-icon" />
						<text class="tool-text">{{ item.title }}</text>

					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		modelNavigateTo
	} from "./tpl";

	export default {
		props: ["res"],
		data() {
			return {
				modelNavigateTo,
				// 假设我们有两个swiper-item，每个item包含多个金刚区项  
				list: [
					// 可以根据需要添加更多swiper-item  
				],
				scrollLeft: 0, // 滚动位置
			};
		},
		mounted() {
			console.log("res-data-menu-list=", this.res);

		},
		created() {
			this.handleList()
		},
		methods: {
			// 函数：将数组分割成多个子数组，每个子数组最多包含maxItems个元素
			chunkArray(array, maxItems) {
				let chunks = [];
				for (let i = 0; i < array.length; i += maxItems) {
					chunks.push(array.slice(i, i + maxItems));
				}
				return chunks;
			},
			handleList() {
				// 使用chunkArray函数将list数组分割成多个子数组，每个子数组最多8个元素
				let chunkedList = this.chunkArray(this.res.list, 8);

				// 转换数据结构，将子数组包装成具有child属性的对象
				let transformedData = chunkedList.map(chunk => ({
					child: chunk
				}));
				console.log("chunk-list=", chunkedList, transformedData);
				this.list = transformedData
			}
		},
	};
</script>

<style scoped>
	.container {
		/* padding: 10px; */
	}

	.nav-bar {
		width: 100%;
		height: 200px;
		/* 根据需要调整高度 */
	}

	.nav-bar-wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.nav-bar-item-container {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 10px;
		box-sizing: border-box;
	}

	.nav-bar-item {
		width: 45%;
		/* 根据需要调整宽度，确保一行能容纳多个项 */
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nav-bar-icon {
		width: 60px;
		height: 60px;
	}

	.nav-bar-text {
		margin-top: 5px;
		text-align: center;
		font-size: 14px;
	}

	.tool-bar {
		display: flex;
		flex-direction: row;
		padding: 10px;
		border-radius: 10px;
		margin: 10px 10px 0px 10px;
		background-color: #ffffff;
		overflow-x: auto;
		white-space: nowrap;
		width: 100%;
		height: 150px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		/* 添加阴影 */
	}

	.item-wrap {
		display: flex;
		flex-direction: row;
		overflow-x: auto;
		white-space: pre-wrap;
	}

	.menu-section {
		display: flex;
		flex-direction: row;
		/* white-space: pre-wrap; */
	}

	.tool-item {
		/* width: 80px; */
		width: 15vw;
		/* 每个工具项的宽度占屏幕宽度的20% */
		max-width: 100px;
		height: 15vw;
		margin-bottom: 10px;
		/* 最大宽度设置 */
		margin-right: 10px;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 8px;
		/* 圆角 */
		transition: transform 0.2s ease;
		/* 添加过渡效果 */
	}

	.tool-item:hover {
		transform: scale(1.1);
		/* 鼠标悬浮放大效果 */
	}

	.tool-icon {
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 50%;
		/* 图标改为圆形 */
		margin-bottom: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		/* 图标阴影 */
	}

	.tool-text {
		font-size: 10px;
		color: #333;
		font-weight: bold;
		/* 加粗字体 */
		background: linear-gradient(90deg, #ff7e5f, #feb47b);
		/* 渐变颜色 */
		-webkit-background-clip: text;
		color: transparent;
	}

	@media screen and (max-width: 600px) {
		.tool-item {
			width: 20vw;
			/* 在小屏幕上，每个工具项占30%屏幕宽度 */
		}
	}

	@media screen and (min-width: 600px) {
		.tool-item {
			width: 10vw;
			/* 在大屏幕上，每个工具项占15%屏幕宽度 */
		}
	}
</style>